scroll event TIL 89 | dimmed 영역 스크롤 막기 햄버거 버튼을 눌렀을때 사이드에서 네비게이션 모달이 나오는 페이지의 형태는 쉽게 찾아볼 수 있다. 이때 사용성을 위해서 모달창은 스크롤이 가능하지만(화면보다 네비게이션의 높이가 긴 경우), 그 외에 dimmed 영역은 스크롤이나 터치 이벤트가 불가능하게 하는 것이 좋다. 아래의 코드는 간단하게 스크롤 이벤트를 막을 수 있지만 현재의 위치를 기억하지 못하고 Y의 위치가 0으로 이동해버린다는 단... Reactprevent scrollJavaScriptscroll eventreact-modal스크롤 막기JavaScript TIL#8 React에서 Scroll event 사용하기 웹페이지에서 공통으로 사용되는 Nav 컴포넌트를 만들어서 모든 페이지에 적용하기로 했다. 모든 페이지에서 공통으로 사용하기 위해서 매번 페이지마다 <Nav />를 입력할 필요없이 Routes.js 파일에서 하기와 같이 적용시 모든 페이지에서 적용이 된다. Nav conponent를 scroll위치에 따라 다르게 표현하고 싶어서 하기와 같이 코드를 정리하였습니다. 하기와 같이 코드 작성시, 부... scroll eventReactReact
TIL 89 | dimmed 영역 스크롤 막기 햄버거 버튼을 눌렀을때 사이드에서 네비게이션 모달이 나오는 페이지의 형태는 쉽게 찾아볼 수 있다. 이때 사용성을 위해서 모달창은 스크롤이 가능하지만(화면보다 네비게이션의 높이가 긴 경우), 그 외에 dimmed 영역은 스크롤이나 터치 이벤트가 불가능하게 하는 것이 좋다. 아래의 코드는 간단하게 스크롤 이벤트를 막을 수 있지만 현재의 위치를 기억하지 못하고 Y의 위치가 0으로 이동해버린다는 단... Reactprevent scrollJavaScriptscroll eventreact-modal스크롤 막기JavaScript TIL#8 React에서 Scroll event 사용하기 웹페이지에서 공통으로 사용되는 Nav 컴포넌트를 만들어서 모든 페이지에 적용하기로 했다. 모든 페이지에서 공통으로 사용하기 위해서 매번 페이지마다 <Nav />를 입력할 필요없이 Routes.js 파일에서 하기와 같이 적용시 모든 페이지에서 적용이 된다. Nav conponent를 scroll위치에 따라 다르게 표현하고 싶어서 하기와 같이 코드를 정리하였습니다. 하기와 같이 코드 작성시, 부... scroll eventReactReact